<template>
<div class="page-container">
    <!--工具栏-->
    <div class="toolbar" style="padding-left:15px;">
        <el-form :inline="true" :model="queryFiteris" :size="size" :rules="filtersRules">
            <el-row style="text-align: left;" class="search-input">
                <el-form-item label="商家名称：" label-width="96px">
                    <el-input v-model="queryFiteris.merchantName" placeholder="商家名称"></el-input>
                    <!-- <el-select v-model="queryFiteris.merchantName" placeholder="商家名称" style="width:200px">
              <el-option label="录屏商家02" value="1">录屏商家02</el-option>
              <el-option label="育学园-商城" value="1">育学园-商城</el-option>
              <el-option label="张小二服饰" value="1">张小二服饰</el-option>
              <el-option label="育学园-商城" value="1">育学园-商城</el-option>
            </el-select>-->
                </el-form-item>
                <el-form-item label="状态：" label-width="100px">
                    <!-- <el-input v-model="filters.type" placeholder="模板分类"></el-input> -->
                    <!-- <el-select :model="queryFiteris.status" placeholder="状态" style="width:100%">
                <el-option
                v-for="item in statusOption"
                :key="item.status"
                :label="item.label"
                :value="item.status">
                </el-option>
            </el-select>-->
                    <el-select v-model="queryFiteris.status" placeholder="状态" style="width:200px">
                        <el-option label="有效" value="0"></el-option>
                        <el-option label="无效" value="1"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="合同编码：" prop="code">
                    <el-input v-model="queryFiteris.code" placeholder="合同编码" style="width:200px"></el-input>
                </el-form-item>
                <!-- <el-form-item>
            <el-input v-model="filters.name" placeholder="模板名称" style="width:200px"></el-input>
          </el-form-item>-->
                <el-form-item label="生效时间起：" prop="startTimeStartDate">
                    <el-date-picker v-model="queryFiteris.startTimeStartDate" type="date" format="yyyy-MM-dd" value-format="yyyy-MM-dd" placeholder="合同生效时间起" style="width:200px"></el-date-picker>
                </el-form-item>
                <el-form-item label="生效时间止：" prop="startTimeEndDate">
                    <el-date-picker v-model="queryFiteris.startTimeEndDate" type="date" format="yyyy-MM-dd" value-format="yyyy-MM-dd" placeholder="合同生效时间止" style="width:200px"></el-date-picker>
                </el-form-item>
                <el-form-item label="供应商编码：" prop="supplierCode">
                    <el-input v-model="queryFiteris.supplierCode" placeholder="供应商编码" style="width:200px"></el-input>
                </el-form-item>
                <el-form-item label="供应商名称：" prop="supplierName">
                    <el-input v-model="queryFiteris.supplierName" placeholder="供应商名称" style="width:200px"></el-input>
                </el-form-item>
                <el-form-item label="合同属性：">
                    <!-- <el-input v-model="filters.type" placeholder="模板分类"></el-input> -->
                    <el-select v-model="queryFiteris.type" placeholder="合同属性" style="width:200px">
                        <el-option label="自采合同" value="1"></el-option>
                        <el-option label="经销合同" value="2"></el-option>
                        <el-option label="代销合同" value="3"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="失效时间起：" prop="endTimeStartDate">
                    <el-date-picker v-model="queryFiteris.endTimeStartDate" type="date" value-format="yyyy-MM-dd" placeholder="合同失效时间起" style="width:200px"></el-date-picker>
                </el-form-item>
                <el-form-item label="失效时间止：" prop="endTimeEndDate">
                    <el-date-picker v-model="queryFiteris.endTimeEndDate" type="date" value-format="yyyy-MM-dd" placeholder="合同失效时间止" style="width:200px"></el-date-picker>
                </el-form-item>
            </el-row>
            <el-row class="search-button noboder">
                <el-form-item>
                    <kt-button icon="fa fa-search" :label="$t('action.search')" type="primary" @click="findPage(dataForm)" />
                </el-form-item>
                <el-form-item>
                    <kt-button icon="fa fa-refresh" :label="$t('action.reset')" @click="reset" type="primary" />
                </el-form-item>
            </el-row>
            <el-row class="search-button">
                <el-form-item>
                    <kt-button icon="fa fa-plus" :label="$t('action.add')" type="primary" @click="handleAdd" />
                </el-form-item>
                <el-form-item>
                    <kt-button icon="fa fa-hand-pointer-o" label="导出" @click="downloadExcel" type="primary" />
                </el-form-item>
                <el-form-item>
                    <kt-button icon="fa fa-hand-pointer-o" label="重启" @click="confim" type="primary" />
                </el-form-item>
                <el-form-item>
                    <kt-button icon="fa fa-hand-pointer-o" label="续签" @click="confim" type="primary" />
                </el-form-item>
                <el-form-item>
                    <kt-button icon="fa fa-hand-pointer-o" label="延期" @click="confim" type="primary" />
                </el-form-item>
                <el-form-item>
                    <kt-button icon="fa fa-hand-pointer-o" label="变更" @click="confim" type="primary" />
                </el-form-item>
                <el-form-item>
                    <kt-button icon="fa fa-pencil" label="审核" @click="confim" type="primary" />
                </el-form-item>
                <el-form-item>
                    <kt-button icon="fa fa-hand-pointer-o" label="暂停" @click="confim" type="primary" />
                </el-form-item>
            </el-row>
        </el-form>
    </div>
    <el-row class="t_r">
        <el-button-group>
            <el-tooltip content="刷新" placement="top">
                <el-button icon="fa fa-refresh" @click="findPage(null)"></el-button>
            </el-tooltip>
            <el-tooltip content="列显示" placement="top">
                <el-button icon="fa fa-filter" @click="displayFilterColumnsDialog"></el-button>
            </el-tooltip>
            <el-tooltip content="导出" placement="top">
                <el-button icon="fa fa-file-excel-o" @click="downloadExcel"></el-button>
            </el-tooltip>
        </el-button-group>
    </el-row>
    <!-- <div class="toolbar" style="float:right;padding-right:15px;">
      <table-column-filter-dialog
        ref="tableColumnFilterDialog"
        :columns="columns"
        @handleFilterColumns="handleFilterColumns"
      ></table-column-filter-dialog>
    </div> -->
    <!--表格内容栏-->
    <!-- <CyTable
      :height="350"
      :data="pageResult"
      :columns="filterColumns"
      @findPage="findPage"
      @handleDelete="handleDelete"
      @handleEdit="handleDetail"
      ref="CyTable"
    ></CyTable> -->

    <el-table :data="filters.res.rows" :header-cell-style="{ 'color': '#FFF','background-color': '#409EFF','text-align': 'center'}" :highlight-current-row="true" :max-height="1500" :size="size" v-loading="loading">

        <el-table-column align="center" prop="name" label="合同名称" width="120"></el-table-column>
        <el-table-column align="center" prop="supplierCode" label="供应商编码" width="120"></el-table-column>
        <el-table-column align="center" prop="supplierName" label="供应商名称" width="120"></el-table-column>
        <el-table-column align="center" prop="busiType" label="合同类型" width="120">
            <template slot-scope="scope">
                {{formatbusiType(scope.row,null,scope.row['busiType'])}}
            </template>
        </el-table-column>
        <el-table-column align="center" prop="code" label="合同编码" width="120"></el-table-column>
        <el-table-column align="center" prop="merchantCode" label="商家编码" width="120"></el-table-column>
        <el-table-column align="center" prop="merchantName" label="商家名称" width="120"></el-table-column>
        <el-table-column align="center" prop="type" label="合同属性" width="120">
            <template slot-scope="scope">
                {{formatType(scope.row,null,scope.row['type'])}}
            </template>
        </el-table-column>
        <el-table-column align="center" prop="startTime" label="生效开始时间" width="120"></el-table-column>
        <el-table-column align="center" prop="endTime" label="生效结束时间" width="120"></el-table-column>
        <el-table-column align="center" prop="tradeCurrency" label="交易币别" width="120">
            <template slot-scope="scope">
                {{formatTradeCurrency(scope.row,null,scope.row['tradeCurrency'])}}
            </template>
        </el-table-column>
        <el-table-column align="center" prop="status" label="状态" width="120">
            <template slot-scope="scope">
                {{formatStatus(scope.row,null,scope.row['status'])}}
            </template>
        </el-table-column>
        <el-table-column align="center" prop="createTime" label="制单时间" width="120"></el-table-column>
        <el-table-column align="center" prop="createrName" label="制单人" width="120"></el-table-column>
        <el-table-column align="left" fixed="right" label="操作" width="200">
            <template slot-scope="scope">
                <kt-button type="text" size="mini" @click="handleDetail(scope.row)" label="编辑" />
                <kt-button type="text" size="mini" @click="handleDelete(scope)" label="删除" />
            </template>
        </el-table-column>
    </el-table>
    <div class="t_r">
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="pageRequest.pageNum" :page-sizes="[10, 20, 50, 100 ,300 , 500]" :page-size="pageRequest.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="filters.res.total"></el-pagination>
    </div>
    <!--新增编辑界面-->
    <el-dialog title="选择供应商" width="55%" :visible.sync="dialogVisible" :close-on-click-modal="false" @closed="handleClose">
        <el-form :model="supplierDataForm" label-width="120px" ref="supplierDataForm" :size="size" label-position="right" inline>
            <el-row class="search-input">
                <el-form-item label="供货商助记码：" prop="supplierCode">
                    <el-input v-model="supplierDataForm.supplierMnemonicCode" auto-complete="off" placeholder="请输入供货商助记码" clearable></el-input>
                </el-form-item>
                <el-form-item label="供应商名称：" prop="supplierName">
                    <el-input v-model="supplierDataForm.supplierName" auto-complete="off" placeholder="请输入供应商名称" clearable></el-input>
                </el-form-item>
            </el-row>
            <el-row class="search-button">
                <el-form-item>
                    <kt-button icon="fa fa-search" :label="$t('action.search')" type="primary" @click="findSupplierList()" />
                </el-form-item>
                <el-form-item>
                    <kt-button icon="fa fa-refresh" :label="$t('action.reset')" @click="resetSupplier" type="primary" />
                </el-form-item>
            </el-row>
            <template>
                <el-table :data="tableData" border="" style="width: 100%" tooltip-effect="dark" @selection-change="handleSelectionChange">
                    <el-table-column type="selection"></el-table-column>
                    <el-table-column prop="supplierMnemonicCode" label="供货商助记码"></el-table-column>
                    <el-table-column prop="supplierName" label="供应商名称"></el-table-column>
                </el-table>
                <div class="block" style="text-align: right;">
                    <el-pagination :current-page="supplierDataForm.start" :page-sizes="[10, 20, 30, 50]" :page-size="supplierDataForm.limit" layout="total, sizes, prev, pager, next, jumper" :total="supplierDataForm.total"></el-pagination>
                </div>
            </template>
        </el-form>
        <div slot="footer" class="dialog-footer" style="text-align:center">
            <el-button :size="size" @click="addContract()" type="primary">确认</el-button>
            <el-button :size="size" @click.native="dialogVisible = false">{{$t('action.cancel')}}</el-button>
        </div>
    </el-dialog>
    <!--合同详情页面-->
    <el-dialog :title="operation?'详情':'详情'" width="85%" :visible.sync="detailpage" :close-on-click-modal="false" @closed="handleClose">
        <el-form :model="dataForm" label-width="120px" :rules="dataFormRules" ref="dataForm" :size="size" label-position="right" inline>
            <el-form-item label="ID：" prop="id" v-if="false">
                <el-input v-model="dataForm.id" :disabled="true" auto-complete="off"></el-input>
            </el-form-item>
            <el-row class="search-input">
                <el-form-item label="合同名称：" prop="name">
                    <el-input v-model="dataForm.name" required placeholder="请输入"></el-input>
                </el-form-item>
                <el-form-item label="业务编码：" prop="busiCode">
                    <el-input v-model="dataForm.busiCode" placeholder="请输入"></el-input>
                </el-form-item>
                <el-form-item label="合同编码：" prop="code">
                    <el-input v-model="dataForm.code" :disabled="true" placeholder="请输入"></el-input>
                </el-form-item>
                <el-form-item label="商家编码：" prop="merchantCode">
                    <el-input v-model="dataForm.merchantCode" placeholder="请输入"></el-input>
                </el-form-item>
                <el-form-item label="商家名称：" prop="merchantName">
                    <el-input v-model="dataForm.merchantName" placeholder="请输入"></el-input>
                </el-form-item>
                <el-form-item label="合同属性：" prop="type">
                    <el-select placeholder="请选择" v-model="dataForm.type" size="mini">
                        <el-option label="自采合同" value="0"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="生效开始时间：" prop="startTime">
                    <el-date-picker v-model="dataForm.startTime" type="date" placeholder="生效开始时间"></el-date-picker>
                </el-form-item>
                <el-form-item label="生效结束时间：" prop="endTime">
                    <el-date-picker v-model="dataForm.endTime" type="date" placeholder="生效结束时间"></el-date-picker>
                </el-form-item>
                <el-form-item label="交易币别：" prop="tradeCurrency">
                    <el-select placeholder="请选择" v-model="dataForm.tradeCurrency" size="mini">
                        <el-option label="人名币" value="CNY"></el-option>
                        <el-option label="美元" value="USD"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="状态：" prop="status">
                    <el-select placeholder="请选择" v-model="dataForm.status" size="mini">
                        <el-option label="有效" value="0"></el-option>
                        <el-option label="无效" value="1"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="供应商编码：" prop="supplierCode">
                    <el-input v-model="dataForm.supplierCode" :disabled="true" placeholder="请输入"></el-input>
                </el-form-item>
                <el-form-item label="供应商名称：" prop="supplierName">
                    <el-input v-model="dataForm.supplierName" :disabled="true" placeholder="请输入"></el-input>
                </el-form-item>
            </el-row>
            <template>
                <el-tabs v-model="activeName" @tab-click="handleClick" type="card">
                    <!-- 基本信息 -->
                    <el-tab-pane label="基本信息" name="1">
                        <el-row>
                            <el-checkbox v-model="checked" @change="onchange">外贸合同</el-checkbox>
                        </el-row>
                        <el-row>
                            <el-col :span="12">
                                <el-form-item label="生效日期：" prop="number">
                                    <el-date-picker v-model="filters.startDate" type="date" value-format="yyyy-MM-dd" placeholder="生效日期" style="width:200px"></el-date-picker>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="失效日期：" prop="remark">
                                    <el-date-picker v-model="filters.startDate" type="date" value-format="yyyy-MM-dd" placeholder="失效日期" style="width:200px"></el-date-picker>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-checkbox v-model="checked1" @change="onchangeType">指定合同商品类目</el-checkbox>
                        </el-row>
                        <!-- 财务信息 -->
                        <el-divider></el-divider>
                        <el-row>
                            <el-span>财务信息</el-span>
                        </el-row>
                        <el-row>
                            <el-col :span="12">
                                <el-form-item label="结算方式：" prop="number">
                                    <el-select style="width:200px">
                                        <el-option label="账期结算" value="1">账期结算</el-option>
                                        <el-option label="账期结算" value="1">账期结算</el-option>
                                    </el-select>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="付款账期：" prop="number">
                                    <el-select style="width:200px">
                                        <el-option label="日账期" value="1">日账期</el-option>
                                        <el-option label="月账期" value="1">月账期</el-option>
                                        <el-option label="年账期" value="1">年账期</el-option>
                                    </el-select>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="12">
                                <el-form-item label="支持开票：" prop="number">
                                    <el-radio v-model="radio" label="1">允许</el-radio>
                                    <el-radio v-model="radio" label="2">不允许</el-radio>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="支持专票：" prop="number">
                                    <el-radio v-model="radio" label="3">备选项</el-radio>
                                    <el-radio v-model="radio" label="4">不允许</el-radio>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <!-- 外贸信息 -->
                        <el-row v-if="foreignTrade" style="text-align:center">
                            <el-divider></el-divider>
                            <el-row style="text-align:left">
                                <el-span>外贸信息</el-span>
                            </el-row>
                            <el-row>
                                <el-col :span="8">
                                    <el-form-item label="结算货币：" prop="number">
                                        <el-select style="width:200px">
                                            <el-option label="账期结算" value="1">账期结算</el-option>
                                            <el-option label="账期结算" value="1">账期结算</el-option>
                                        </el-select>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="8">
                                    <el-form-item label="贸易方式：" prop="number">
                                        <el-select style="width:200px">
                                            <el-option label="日账期" value="1">日账期</el-option>
                                            <el-option label="月账期" value="1">月账期</el-option>
                                            <el-option label="年账期" value="1">年账期</el-option>
                                        </el-select>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="8">
                                    <el-form-item label="成交方式：" prop="number">
                                        <el-select style="width:200px">
                                            <el-option label="工厂交货（EXW）" value="1">工厂交货（EXW）</el-option>
                                            <el-option label="边境交货(DAF)" value="1">边境交货(DAF)</el-option>
                                            <el-option label="目的港船上交货(DES)" value="1">目的港船上交货(DES)</el-option>
                                            <el-option label="目的港码头交货(DEQ)" value="1">目的港码头交货(DEQ)</el-option>
                                            <el-option label="未完税交货(DDU)" value="1">未完税交货(DDU)</el-option>
                                            <el-option label="完税后交货(DDP)" value="1">完税后交货(DDP)</el-option>
                                            <el-option label="货交承运人（FCA）" value="1">货交承运人（FCA）</el-option>
                                            <el-option label="船边交货（FAS)" value="1">船边交货（FAS)</el-option>
                                            <el-option label="船上交货（FOB）" value="1">船上交货（FOB）</el-option>
                                        </el-select>
                                    </el-form-item>
                                </el-col>
                            </el-row>
                            <el-row>
                                <el-col :span="8">
                                    <el-form-item label="运输方式：" prop="number">
                                        <el-select style="width:200px">
                                            <el-option label="海运" value="1">海运</el-option>
                                            <el-option label="多式联运" value="1">多式联运</el-option>
                                            <el-option label="空运" value="1">空运</el-option>
                                            <el-option label="铁路" value="1">铁路</el-option>
                                            <el-option label="公路" value="1">公路</el-option>
                                            <el-option label="内河" value="1">内河</el-option>
                                            <el-option label="专递或邮寄" value="1">专递或邮寄</el-option>
                                        </el-select>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="8">
                                    <el-form-item label="装运港：" prop="number">
                                        <el-select style="width:200px">
                                            <el-option label="账期结算" value="1">账期结算</el-option>
                                            <el-option label="账期结算" value="1">账期结算</el-option>
                                        </el-select>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="8">
                                    <el-form-item label="抵运港：" prop="number">
                                        <el-select style="width:200px">
                                            <el-option label="日账期" value="1">日账期</el-option>
                                            <el-option label="月账期" value="1">月账期</el-option>
                                        </el-select>
                                    </el-form-item>
                                </el-col>
                            </el-row>
                        </el-row>
                        <el-row v-if="types" style="text-align:center">
                            <el-divider></el-divider>
                            <el-row style="text-align:left">
                                <el-span>商品类目</el-span>
                            </el-row>
                            <el-row>
                                <el-col :span="6">
                                    <el-form-item>
                                        <el-checkbox v-model="a">营养辅食</el-checkbox>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="6">
                                    <el-form-item>
                                        <el-checkbox v-model="b">母婴用品</el-checkbox>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="6">
                                    <el-form-item>
                                        <el-checkbox v-model="d">早教玩具</el-checkbox>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="6">
                                    <el-form-item>
                                        <el-checkbox v-model="c">食品</el-checkbox>
                                    </el-form-item>
                                </el-col>
                            </el-row>
                            <el-row>
                                <el-col :span="6">
                                    <el-form-item>
                                        <el-checkbox v-model="a">臻选图书</el-checkbox>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="6">
                                    <el-form-item>
                                        <el-checkbox v-model="b">宝宝日用</el-checkbox>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="6">
                                    <el-form-item>
                                        <el-checkbox v-model="d">箱包</el-checkbox>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="6">
                                    <el-form-item>
                                        <el-checkbox v-model="c">化妆品</el-checkbox>
                                    </el-form-item>
                                </el-col>
                            </el-row>
                        </el-row>
                        <el-row>
                            <el-form-item label="备注：" prop="remark">
                                <el-input type="textarea" v-model="filters.remark" style="width:1000px"></el-input>
                            </el-form-item>
                        </el-row>
                        <el-row style="text-align:center">
                            <el-form-item>
                                <kt-button icon="fa fa-save" label="保存" type="primary" @click="findPage(filters)" />
                            </el-form-item>
                        </el-row>
                    </el-tab-pane>
                    <el-tab-pane label="费用信息" name="2">
                        <el-row class="t_r">
                            <el-button :size="size" @click="confim" type="primary">删除所选费用类型</el-button>
                            <el-button :size="size" @click="addprice" type="primary">添加费用类型</el-button>
                        </el-row>
                        <template>
                            <el-table :data="tableDataprice" border="" style="width: 100%">
                                <el-table-column type="selection" width="55"></el-table-column>
                                <el-table-column prop="1" label="费用类型编码" width="180"></el-table-column>
                                <el-table-column prop="2" label="费用类型名称" width="180"></el-table-column>
                                <el-table-column prop="3" label="计费周期"></el-table-column>
                                <el-table-column prop="4" label="计费基准"></el-table-column>
                                <el-table-column prop="5" label="计费方式"></el-table-column>
                                <el-table-column prop="6" label="生成费用单方式"></el-table-column>
                                <el-table-column prop="7" label="审核方式"></el-table-column>
                                <el-table-column prop="8" label="是否设置保底金额"></el-table-column>
                                <el-table-column prop="9" label="保底金额"></el-table-column>
                                <el-table-column prop="10" label="费用金额(元)"></el-table-column>
                                <el-table-column prop="11" label="计费比率"></el-table-column>
                                <el-table-column prop="12" label="	备注"></el-table-column>
                                <el-table-column prop="13" label="	阶梯费用"></el-table-column>
                            </el-table>
                        </template>
                    </el-tab-pane>
                    <el-tab-pane label="合同附件" name="3">
                        <el-row class="t_r">
                            <el-button :size="size" @click="uploadfile" type="primary">上传合同附件</el-button>
                            <el-button :size="size" @click="handleDelete" type="primary">删除</el-button>
                        </el-row>
                        <template>
                            <el-table border="" style="width: 100%">
                                <el-table-column type="selection" width="55"></el-table-column>
                                <el-table-column prop="1" label="合同附件" width="180"></el-table-column>
                                <el-table-column prop="2" label="上载人" width="180"></el-table-column>
                                <el-table-column prop="3" label="时间"></el-table-column>
                            </el-table>
                        </template>
                    </el-tab-pane>
                    <el-tab-pane label="查看合同协议" name="4">
                        <el-row class="t_r">
                            <el-button :size="size" @click="addprotocol" type="primary">新增合同模板</el-button>
                        </el-row>
                        <template>
                            <el-table :data="tableDataprotocol" border="" style="width: 100%">
                                <el-table-column prop="1" label="合同类型" width="180"></el-table-column>
                                <el-table-column prop="2" label="模板编号" width="180"></el-table-column>
                                <el-table-column prop="3" label="版本号"></el-table-column>
                                <el-table-column prop="4" label="模板名称"></el-table-column>
                                <el-table-column prop="5" label="模板附件"></el-table-column>
                                <el-table-column prop="6" label="上载人"></el-table-column>
                                <el-table-column prop="7" label="上载时间"></el-table-column>
                                <el-table-column prop="8" label="备注"></el-table-column>
                                <el-table-column fixed="right" label="操作" width="100">
                                    <template slot-scope="scope">
                                        <el-button @click="addprotocol" type="text" size="small">编辑</el-button>
                                        <el-button type="text" size="small" @click="handleDelete">删除</el-button>
                                    </template>
                                </el-table-column>
                            </el-table>
                        </template>
                    </el-tab-pane>
                    <el-tab-pane label="操作日志" name="5">
                        <template>
                            <el-table :data="tableDatapeople" border="" style="width: 100%">
                                <el-table-column prop="1" label="操作用户ID" width="180"></el-table-column>
                                <el-table-column prop="2" label="操作人" width="180"></el-table-column>
                                <el-table-column prop="3" label="操作时间"></el-table-column>
                                <el-table-column prop="4" label="操作"></el-table-column>
                                <el-table-column prop="5" label="备注"></el-table-column>
                            </el-table>
                        </template>
                    </el-tab-pane>
                    <el-tab-pane label="联系人" name="6">
                        <el-row class="t_r">
                            <el-button :size="size" @click="addlink" type="primary">新增联系人</el-button>
                        </el-row>
                        <template>
                            <el-table :data="tableDatalink" border="" style="width: 100%">
                                <el-table-column prop="1" label="联系人" width="180"></el-table-column>
                                <el-table-column prop="2" label="联系人职位" width="180"></el-table-column>
                                <el-table-column prop="3" label="联系人固定电话"></el-table-column>
                                <el-table-column prop="4" label="联系人手机"></el-table-column>
                                <el-table-column prop="5" label="联系人Email"></el-table-column>
                                <el-table-column prop="6" label="联系地址"></el-table-column>
                                <el-table-column prop="7" label="主要联系人"></el-table-column>
                                <el-table-column prop="8" label="备注"></el-table-column>
                                <el-table-column fixed="right" label="操作" width="100">
                                    <template slot-scope="scope">
                                        <el-button @click="handleDelete" type="text" size="small">删除</el-button>
                                        <el-button type="text" size="small" @click="editLink">编辑</el-button>
                                    </template>
                                </el-table-column>
                            </el-table>
                        </template>
                    </el-tab-pane>
                    <el-tab-pane label="店铺信息" name="7">
                        <el-row class="t_r">
                            <el-button :size="size" @click="addshop" type="primary">添加店铺组织</el-button>
                        </el-row>
                        <template>
                            <el-table :data="tableDatashop" border="" style="width: 100%">
                                <el-table-column prop="1" label="店铺编码" width="180"></el-table-column>
                                <el-table-column prop="2" label="店铺名称" width="180"></el-table-column>
                                <el-table-column prop="3" label="店铺类型"></el-table-column>
                                <el-table-column prop="4" label="店铺地址"></el-table-column>
                                <el-table-column fixed="right" label="操作" width="100">
                                    <template slot-scope="scope">
                                        <el-button @click="handleDelete" type="text" size="small">删除</el-button>
                                    </template>
                                </el-table-column>
                            </el-table>
                        </template>
                    </el-tab-pane>
                </el-tabs>
            </template>
            <!-- <el-row style="text-align:center">

<el-form-item>

<kt-button icon="fa fa-search" :label="$t('action.search')"  type="primary" @click="findPage(filters)"/>

</el-form-item>

<el-form-item>

<kt-button icon="fa fa-refresh" :label="$t('action.reset')"  @click="reset" type="primary"/>

</el-form-item>

        </el-row>-->
        </el-form>
        <div slot="footer" class="dialog-footer" style="text-align:center">
            <el-button :size="size" @click="updateContract" type="primary">确认</el-button>
            <!-- <el-button :size="size" @click="deleteinfo" type="primary">删除</el-button> -->
            <el-button :size="size" @click.native="detailpage = false">{{$t('action.cancel')}}</el-button>
        </div>
    </el-dialog>
    <!-- 添加费用弹框 -->
    <el-dialog :title="operation?'新增':'编辑'" width="35%" :visible.sync="priceModal" :close-on-click-modal="false" @closed="handleClose">
        <el-form :model="dataForm" label-width="80px" :rules="dataFormRules" ref="dataForm" :size="size" label-position="right" inline>
            <el-form-item label="ID：" prop="id" v-if="false">
                <el-input v-model="dataForm.id" :disabled="true" auto-complete="off"></el-input>
            </el-form-item>
            <el-row>
                <el-form-item label="一级费用类型：" prop="number">
                    <!-- <el-input v-model="dataForm.number"  auto-complete="off"></el-input> -->
                    <el-select>
                        <el-option label="一级费用类型">一级费用类型</el-option>
                        <el-option label="一级费用类型">一级费用类型</el-option>
                        <el-option label="一级费用类型">一级费用类型</el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="计费周期" prop="remark">
                    <el-select>
                        <el-option label="按月">按月</el-option>
                        <el-option label="按季度">按季度</el-option>
                        <el-option label="按年">按年</el-option>
                        <el-option label="一次性费用">一次性费用</el-option>
                        <el-option label="手动创建">手动创建</el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="计费方式" prop="remark">
                    <el-select>
                        <el-option label="固定比例">固定比例</el-option>
                        <el-option label="固定金额">固定金额</el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="计费基准" prop="remark">
                    <el-select>
                        <el-option label="销售额">销售额</el-option>
                        <el-option label="销售成本">销售成本</el-option>
                        <el-option label="进退货金额">进退货金额</el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="生成费用单方式" prop="remark">
                    <el-select>
                        <el-option label="自动生成">自动生成</el-option>
                        <el-option label="手动生成">手动生成</el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="审核方式" prop="remark">
                    <el-select>
                        <el-option label="自动审核">自动审核</el-option>
                        <el-option label="手动审核">手动审核</el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="计费比率" prop="remark">
                    <el-input v-model="dataForm.remark" auto-complete="off"></el-input>
                </el-form-item>
                <el-form-item label="设置保底金额" prop="remark">
                    <el-radio v-model="radio" label="1">是</el-radio>
                    <el-radio v-model="radio" label="2">否</el-radio>
                </el-form-item>
                <el-form-item label="备注" prop="remark">
                    <el-input v-model="dataForm.remark" auto-complete="off"></el-input>
                </el-form-item>
            </el-row>
        </el-form>
        <div slot="footer" class="dialog-footer" style="text-align:center">
            <el-button :size="size" @click="confim" type="primary">确认</el-button>
            <el-button :size="size" @click.native="priceModal = false">{{$t('action.cancel')}}</el-button>
        </div>
    </el-dialog>
    <!-- 上传弹框 -->
    <el-dialog title="上传合同附件" width="35%" :visible.sync="uploadModal" :close-on-click-modal="false" @closed="handleClose">
        <el-form :model="dataForm" label-width="100px" :rules="dataFormRules" ref="dataForm" :size="size" label-position="right" inline>
            <el-row>
                <el-form-item label="请选择：">
                    <el-input type="file"></el-input>
                </el-form-item>
            </el-row>
        </el-form>
        <div slot="footer" class="dialog-footer" style="text-align:center">
            <el-button :size="size" @click="confim" type="primary">确认</el-button>
            <el-button :size="size" @click.native="uploadModal = false">{{$t('action.cancel')}}</el-button>
        </div>
    </el-dialog>
    <!-- 合同模板 -->
    <el-dialog :title="operation?'新增':'编辑'" width="65%" :visible.sync="condialogVisible" :close-on-click-modal="false" @closed="handleClose">
        <el-form :model="dataForm" label-width="120px" :rules="dataFormRules" ref="dataForm" :size="size" label-position="right" inline>
            <el-form-item label="ID：" prop="id：" v-if="false">
                <el-input v-model="dataForm.id" :disabled="true" auto-complete="off" placeholder="请输入"></el-input>
            </el-form-item>
            <el-row class="search-input">
                <el-form-item label="模板编号：" prop="number">
                    <el-input v-model="dataForm.number" auto-complete="off" placeholder="请输入"></el-input>
                </el-form-item>
                <el-form-item label="商家：" prop="business">
                    <!-- <el-input v-model="dataForm.business"  auto-complete="off" ></el-input> -->
                    <el-select v-model="dataForm.business" placeholder="商家">
                        <el-option label="录屏商家02" value="1">录屏商家02</el-option>
                        <el-option label="育学园-商城" value="1">育学园-商城</el-option>
                        <el-option label="张小二服饰" value="1">张小二服饰</el-option>
                        <el-option label="育学园-商城" value="1">育学园-商城</el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="模板分类：" prop="type">
                    <el-input v-model="dataForm.type" auto-complete="off" placeholder="请输入"></el-input>
                </el-form-item>
                <el-form-item label="模板名称：" prop="name">
                    <el-input v-model="dataForm.remains" auto-complete="off" placeholder="请输入"></el-input>
                </el-form-item>
                <el-form-item label="模板附件：" prop="template">
                    <el-input v-model="dataForm.template" auto-complete="off" placeholder="请输入"></el-input>
                </el-form-item>
                <el-form-item label="备注：" prop="remark">
                    <el-input v-model="dataForm.remark" auto-complete="off" placeholder="请输入"></el-input>
                </el-form-item>
            </el-row>
            <el-row></el-row>
        </el-form>
        <div slot="footer" class="dialog-footer" style="text-align:center">
            <el-button :size="size" @click.native="condialogVisible = false">{{$t('action.cancel')}}</el-button>
            <el-button :size="size" type="primary" @click.native="submitForm" :loading="editLoading">{{$t('action.submit')}}</el-button>
        </div>
    </el-dialog>
    <!-- 联系人弹框 -->
    <el-dialog :title="operation?'新增':'编辑'" width="65%" :visible.sync="linkerModal" :close-on-click-modal="false" @closed="handleClose">
        <el-form :model="dataForm" label-width="140px" :rules="dataFormRules" ref="dataForm" :size="size" label-position="right" inline>
            <el-form-item label="ID：" prop="id" v-if="false">
                <el-input v-model="dataForm.id" :disabled="true" auto-complete="off" placeholder="请输入"></el-input>
            </el-form-item>
            <el-row class="search-input">
                <el-form-item label="联系人：" prop="number">
                    <el-input v-model="dataForm.number" auto-complete="off" placeholder="请输入"></el-input>
                </el-form-item>
                <el-form-item label="联系人职位：" prop="business">
                    <el-input v-model="dataForm.business" auto-complete="off" placeholder="请输入"></el-input>
                </el-form-item>
                <el-form-item label="联系人固定电话：" prop="type">
                    <el-input v-model="dataForm.type" auto-complete="off" placeholder="请输入"></el-input>
                </el-form-item>
                <el-form-item label="联系人Email：" prop="name">
                    <el-input v-model="dataForm.remains" auto-complete="off" placeholder="请输入"></el-input>
                </el-form-item>
                <el-form-item label="联系地址：" prop="template">
                    <el-input v-model="dataForm.template" auto-complete="off" placeholder="请输入"></el-input>
                </el-form-item>
                <el-form-item label="备注：" prop="remark">
                    <el-input v-model="dataForm.remark" auto-complete="off" placeholder="请输入"></el-input>
                </el-form-item>
            </el-row>
            <el-row></el-row>
        </el-form>
        <div slot="footer" class="dialog-footer" style="text-align:center">
            <el-button :size="size" @click.native="linkerModal = false">{{$t('action.cancel')}}</el-button>
            <el-button :size="size" type="primary" @click.native="submitForm" :loading="editLoading">{{$t('action.submit')}}</el-button>
        </div>
    </el-dialog>
    <!-- 店铺弹框 -->
    <el-dialog :title="operation?'新增':'编辑'" width="45%" :visible.sync="shopModal" :close-on-click-modal="false" @closed="handleClose">
        <el-form :model="dataForm" label-width="140px" :rules="dataFormRules" ref="dataForm" :size="size" label-position="right" inline>
            <el-form-item label="ID：" prop="id" v-if="false">
                <el-input v-model="dataForm.id" :disabled="true" auto-complete="off"></el-input>
            </el-form-item>
            <el-row class="search-input">
                <el-form-item label="供应商编码：" prop="number">
                    <el-input v-model="dataForm.supplierMnemonicCode" auto-complete="off" placeholder="请输入"></el-input>
                </el-form-item>
                <el-form-item label="供应商名称：" prop="remark">
                    <el-input v-model="dataForm.supplierName" auto-complete="off" placeholder="请输入"></el-input>
                </el-form-item>
            </el-row>
            <el-row style="text-align:center">
                <el-form-item>
                    <kt-button icon="fa fa-search" :label="$t('action.search')" type="primary" @click="findPage(filters)" />
                </el-form-item>
                <el-form-item>
                    <kt-button icon="fa fa-refresh" :label="$t('action.reset')" @click="reset" type="primary" />
                </el-form-item>
            </el-row>
            <template>
                <el-table :data="tableDatashopmodal" border="" style="width: 100%">
                    <el-table-column type="selection" width="55"></el-table-column>
                    <el-table-column prop="business" label="商家名称"></el-table-column>
                    <el-table-column prop="shopname" label="店铺编码"></el-table-column>
                    <el-table-column prop="shopname" label="店铺编码"></el-table-column>
                    <el-table-column prop="shoptype" label="店铺类型"></el-table-column>
                </el-table>
            </template>
        </el-form>
        <div slot="footer" class="dialog-footer" style="text-align:center">
            <el-button :size="size" @click="confim" type="primary">提交</el-button>
            <el-button :size="size" @click.native="shopModal = false">{{$t('action.cancel')}}</el-button>
        </div>
    </el-dialog>
</div>
</template>

<script src="//unpkg.com/element-ui@2.12.0/lib/index.js">
</script><script>
import PopupTreeInput from "@/components/PopupTreeInput";
import CyTable from "@/views/Core/CyTable";
import KtButton from "@/views/Core/KtButton";
import TableColumnFilterDialog from "@/views/Core/TableColumnFilterDialog";
import {
    format
} from "@/utils/datetime";
import XLSX from "xlsx";
import axios from "axios";
import {
    exportExcel
} from "@/utils/excel";
export default {
    components: {
        PopupTreeInput,
        CyTable,
        KtButton,
        TableColumnFilterDialog
    },
    watch: {
        dialogVisible(newVal, OblVal) {
            this.supplierDataForm = {};
        }
    },
    data() {
        var checkStartTime = (rule, value, callback) => {
            if (value == null || typeof value == "undefined") {
                callback();
            }
            if (
                this.queryFiteris.startTimeEndDate == null ||
                typeof this.queryFiteris.startTimeEndDate == "undefined"
            ) {
                callback();
            }
            if (
                new Date(value).getTime() >
                new Date(this.queryFiteris.startTimeEndDate).getTime()
            ) {
                callback(new Error("开始时间不能大于结束时间"));
            }
            this.$refs.queryFiteris.clearValidate("startTimeEndDate");
            callback();
        };
        var checkEndTime = (rule, value, callback) => {
            if (value == null || typeof value == "undefined") {
                callback();
            }
            if (
                this.queryFiteris.startTimeStartDate == null ||
                typeof this.queryFiteris.startTimeStartDate == "undefined"
            ) {
                callback();
            }
            if (
                new Date(value).getTime() <
                new Date(this.queryFiteris.startTimeStartDate).getTime()
            ) {
                callback(new Error("结束时间不能小于开始时间"));
            }
            this.$refs.queryFiteris.clearValidate("startTimeStartDate");
            callback();
        };
        var endCheckStartTime = (rule, value, callback) => {
            if (value == null || typeof value == "undefined") {
                callback();
            }
            if (
                this.queryFiteris.endTimeEndDate == null ||
                typeof this.queryFiteris.endTimeEndDate == "undefined"
            ) {
                callback();
            }
            if (
                new Date(value).getTime() >
                new Date(this.queryFiteris.endTimeEndDate).getTime()
            ) {
                callback(new Error("开始时间不能大于结束时间"));
            }
            this.$refs.queryFiteris.clearValidate("endTimeEndDate");
            callback();
        };
        var endCheckEndTime = (rule, value, callback) => {
            if (value == null || typeof value == "undefined") {
                callback();
            }
            if (
                this.queryFiteris.endTimeStartDate == null ||
                typeof this.queryFiteris.endTimeStartDate == "undefined"
            ) {
                callback();
            }
            if (
                new Date(value).getTime() <
                new Date(this.queryFiteris.endTimeStartDate).getTime()
            ) {
                callback(new Error("结束时间不能小于开始时间"));
            }
            this.$refs.queryFiteris.clearValidate("endTimeStartDate");
            callback();
        };
        return {
            excelup: this.utils.getUpLoadHost(),
            size: "small",
            radio: "1",
            foreignTrade: false,
            types: false,
            shopModal: false,
            linkerModal: false,
            priceModal: false,
            checked: false,
            condialogVisible: false,
            uploadModal: false,
            checked1: false,
            document_license: "",
            activeName: "second",
            multipleSelection: [],
            filtersRules: {
                startTimeStartDate: [{
                    validator: checkStartTime,
                    trigger: "change"
                }],
                startTimeEndDate: [{
                    validator: checkEndTime,
                    trigger: "change"
                }],
                endTimeStartDate: [{
                    validator: endCheckStartTime,
                    trigger: "change"
                }],
                endTimeEndDate: [{
                    validator: endCheckEndTime,
                    trigger: "change"
                }]
            },
            statusOption: [{
                    status: "",
                    label: "请选择"
                },
                {
                    status: "0",
                    label: "有效"
                },
                {
                    status: "1",
                    label: "无效"
                }
            ],
            filters: {
                name: "",
                res: {
                    total: 0,
                    code: "0000",
                    rows: []
                }
            },
            tableDataprice: [{
                1: "001",
                2: "三A费用类型",
                3: "按月",
                4: "销售额",
                5: "固定比例",
                6: "自动生成",
                7: "自动审核",
                8: "是",
                9: "111.00",
                10: "0.00",
                11: "0",
                12: "否",
                13: "否"
            }],
            tableDataprotocol: [{
                1: "经销合同",
                2: "20190917155550",
                3: "V1",
                4: "经销合同模板",
                5: " 3.jpg",
                6: "merchant",
                7: "2019-09-17 15:55:50",
                8: "是"
            }],
            tableDatapeople: [{
                    1: "19090215374897",
                    2: "superadmin",
                    3: "2019-12-25 14:46:19",
                    4: "添加合同原件",
                    5: "是"
                },
                {
                    1: "19090215374897",
                    2: "superadmin",
                    3: "2019-12-25 14:46:19",
                    4: "添加合同原件",
                    5: "是"
                },
                {
                    1: "19090215374897",
                    2: "superadmin",
                    3: "2019-12-25 14:46:19",
                    4: "添加合同原件",
                    5: "是"
                }
            ],
            tableDatalink: [{
                    1: "李四",
                    2: "总经理",
                    3: "13678945621",
                    4: "13678945621",
                    5: "13678945621@163.com",
                    6: "上海美术学院",
                    7: "张三"
                },
                {
                    1: "李四",
                    2: "总经理",
                    3: "13678945621",
                    4: "13678945621",
                    5: "13678945621@163.com",
                    6: "上海美术学院",
                    7: "张三"
                },
                {
                    1: "李四",
                    2: "总经理",
                    3: "13678945621",
                    4: "13678945621",
                    5: "13678945621@163.com",
                    6: "上海美术学院",
                    7: "张三"
                }
            ],
            tableDatashop: [{
                    1: "jd_001",
                    2: "京东店",
                    3: "直营店",
                    4: "上海美术学院"
                },
                {
                    1: "jd_001",
                    2: "京东店",
                    3: "直营店",
                    4: "上海美术学院"
                },
                {
                    1: "jd_001",
                    2: "京东店",
                    3: "直营店",
                    4: "上海美术学院"
                }
            ],
            tableDatashopmodal: [{
                    business: "张小二服饰",
                    shopnumber: "d_001",
                    shopname: "京东店",
                    shoptype: "	线上店铺"
                },
                {
                    business: "张小二服饰",
                    property: "d_001",
                    shopname: "京东店",
                    shoptype: "	线上店铺"
                },
                {
                    business: "张小二服饰",
                    property: "d_001",
                    shopname: "京东店",
                    shoptype: "	线上店铺"
                }
            ],
            value: 0,
            columns: [],
            tabJson: "",

            warehouselist: [],
            filterColumns: [],
            pageRequest: {
                pageNum: 1,
                pageSize: 10
            },
            pageResult: {},
            dialogImageUrl: "",

            operation: false, // true:新增, false:编辑
            dialogVisible: false, // 新增编辑界面是否显示
            editLoading: false,
            printPage: false,
            dialogVisibleImage: false,
            detailpage: false,
            dataFormRules: {
                name: [{
                    required: true,
                    message: "请输入合同名称",
                    trigger: "blur"
                }],
                busiType: [{
                    required: true,
                    message: "请输入业务类型",
                    trigger: "blur"
                }],
                busiCode: [{
                    required: true,
                    message: "请输入业务编码；",
                    trigger: "blur"
                }],
                code: [{
                    required: true,
                    message: "请输入合同编码",
                    trigger: "blur"
                }],
                merchantCode: [{
                    required: true,
                    message: "请输入商家编码（采购单位）",
                    trigger: "blur"
                }],
                merchantName: [{
                    required: true,
                    message: "请输入商家名称",
                    trigger: "blur"
                }],
                type: [{
                    required: true,
                    message: "请输入合同属性",
                    trigger: "blur"
                }],
                startTime: [{
                    required: true,
                    message: "请输入生效开始时间；",
                    trigger: "blur"
                }],
                endTime: [{
                    required: true,
                    message: "请输入生效结束时间；",
                    trigger: "blur"
                }],
                tradeCurrency: [{
                    required: true,
                    message: "请输入交易币别",
                    trigger: "blur"
                }],
                status: [{
                    required: true,
                    message: "请输入状态",
                    trigger: "blur"
                }]
            },
            dataForm: {
                id: null,
                name: null,
                busiType: null,
                busiCode: null,
                code: null,
                merchantCode: null,
                merchantName: null,
                type: null,
                startTime: null,
                endTime: null,
                createTime: null,
                creater: null,
                tradeCurrency: null,
                status: null,
                supplierCode: null,
                supplierName: null
            },
            queryFiteris: {
                id: null,
                name: null,
                busiType: 1,
                busiCode: null,
                code: null,
                merchantCode: null,
                merchantName: null,
                type: null,
                startTime: null,
                endTime: null,
                createTime: null,
                creater: null,
                tradeCurrency: null,
                status: null,
                supplierCode: "",
                supplierName: ""
            },
            deptData: [],
            deptTreeProps: {
                label: "name",
                children: "children"
            },
            roles: [],
            searchFilters: {
                deleteFlag: 0
            },
            tableHeaderList: [{
                    prop: "name",
                    label: "合同名称",
                    minWidth: 120
                },
                {
                    prop: "supplierCode",
                    label: "供应商编码",
                    minWidth: 120
                },
                {
                    prop: "supplierName",
                    label: "供应商名称",
                    minWidth: 120
                },
                {
                    prop: "busiType",
                    label: "业务类型",
                    minWidth: 120
                },
                {
                    prop: "busiCode",
                    label: "业务编码",
                    minWidth: 120
                },
                {
                    prop: "code",
                    label: "合同编码",
                    minWidth: 120
                },
                {
                    prop: "merchantCode",
                    label: "商家编码",
                    minWidth: 120
                },
                {
                    prop: "merchantName",
                    label: "商家名称",
                    minWidth: 120
                },
                {
                    prop: "type",
                    label: "合同属性",
                    minWidth: 120
                },
                {
                    prop: "startTime",
                    label: "生效开始时间",
                    minWidth: 120
                },
                {
                    prop: "endTime",
                    label: "生效结束时间",
                    minWidth: 120
                },
                {
                    prop: "tradeCurrency",
                    label: "交易币别",
                    minWidth: 120
                },
                {
                    prop: "status",
                    label: "状态",
                    minWidth: 120
                },
                {
                    prop: "createTime",
                    label: "制单时间",
                    minWidth: 120
                },
                {
                    prop: "creator",
                    label: "制单人",
                    minWidth: 120
                }
            ],
            tableList: [],
            tableData: [
                //供应商列表
            ],
            supplierDataForm: {
                supplierMnemonicCode: null,
                supplierName: null,
                start: 1,
                limit: 10
            },

            conCode: "",

            loading: false
        };
    },
    methods: {
        handleSizeChange(val) {
            this.pageRequest.pageSize = val;
            this.findPage();
        },
        handleCurrentChange(val) {
            this.pageRequest.pageNum = val;
            this.findPage();
        },
        // 获取分页数据
        findPage: function (data) {
            // this.$refs.CyTable.findPageStaticState(this.filters);
            this.loading = true;
            let this_ = this;
            if (this_.queryFiteris === undefined || this_.queryFiteris === null) {
                this_.queryFiteris = {};
            }
            // this_.dataForm.pageNum = data === null || data === undefined ? this.pageRequest.pageNum : data;
            this_.queryFiteris.pageSize = this.pageRequest.pageSize;
            this_.queryFiteris.pageNum = this.pageRequest.pageNum;

            this_.queryFiteris.supplierCode = this_.dataForm.supplierMnemonicCode;

            this_.queryFiteris.supplierName = this_.dataForm.supplierName;

            this.utils.request.findPurchaseContractPage(this_.queryFiteris, function (
                res
            ) {
                this_.loading = false;
                if (res.code === "0000") {
                    this_.filters.res.rows = res.data.rows;
                    this_.filters.res.total = res.data.total;
                    console.log(res.data);
                    console.log(this_.tableData);
                    // this_.totalSize = Number(res.data.total);
                    this_.$refs.CyTable.findPageStaticState(this_.filters);
                } else {
                    this_.tableData = [];
                    this_.totalSize = 0;
                }
            });
        },
        addshop() {
            this.shopModal = true;
        },
        editLink() {
            this.linkerModal = true;
        },
        addlink() {
            this.linkerModal = true;
        },
        //合同模板新增
        addprotocol() {
            //查询供应商列表
            // this.utils.request.supplierInformationListPage(this.supplierDataForm,res=>{
            // this.tableData = res.data.rows;
            // this.supplierDataForm.total = res.data.total;
            this.condialogVisible = true;
            // })
        },
        //上传
        uploadfile() {
            this.uploadModal = true;
        },
        //费用信息新增
        addprice() {
            this.priceModal = true;
        },
        onchange(data) {
            if (data == true) {
                this.foreignTrade = true;
            } else {
                this.foreignTrade = false;
            }
        },
        onchangeType(data) {
            if (data == true) {
                this.types = true;
            } else {
                this.types = false;
            }
        },
        confim() {
            this.detailpage = false;
            this.dataForm = {};
            this.$message({
                message: "操作成功",
                type: "success"
            });
        },
        handleDetail(row) {
            //contractEdit?contractCode=1599210104664&id=81
            this.$router.push({
                path: "/contractEdit",
                query: {
                    contractCode: row.code,
                    id: row.id,
                    edit: 1,
                    busiType: 1
                }
            });
            // let this_ = this;
            // this_.detailpage = true;
            // this_.utils.request.getPurchaseContractDetail(
            //   { id: params.row.id },
            //   function(res) {
            //     if (res.code === "0000") {
            //       this_.dataForm = res.data;
            //     } else {
            //       this_.$message({ message: "操作失败, " + data.msg, type: "error" });
            //     }
            //   }
            // );
        },
        handleClick(tab, event) {
            console.log(tab, event);
        },

        //弹窗关闭方法
        handleClose() {
            this.$refs.dataForm.resetFields();
        },
        detailed() {
            this.$router.push({
                path: "/Paje/DetailedMsg"
            });
        },
        //导出
        download() {
            this.$router.push({
                path: "/Paje/DetailedMsg"
            });
        },
        // 批量删除
        handleDelete: function (data) {
            // var ids = "";
            // for (var i = 0; i < data.params.length; i++) {
            //   ids = ids + data.params[i].id + ",";
            // }
            // data.ids = ids;
            let param = {};
            param.ids = data.row.id;
            this.utils.request.deletePurchaseContract(param, this.deleteInfoBack);
        },
        //删除callback
        deleteInfoBack(data) {
            if (data.code == "0000") {
                this.$message({
                    message: "操作成功",
                    type: "success"
                });
            } else {
                this.$message({
                    message: "操作失败, ",
                    type: "error"
                });
            }
            this.findPage();
        },

        //列表下载
        downloadExcel() {
            this.$confirm("确定下载列表文件?", "提示", {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "warning"
                })
                .then(() => {
                    let this_ = this;
                    let fileName = "采购合同查询Excel";
                    if (this_.filters === undefined || this_.filters === null) {
                        this_.filters = {};
                    }
                    this_.filters.pageNum = this.pageRequest.pageNum;
                    this_.filters.pageSize = Number.MAX_SAFE_INTEGER;
                    //查询不分页，传类型值和删除标志值
                    this.utils.request.findPurchaseContractPage(
                        this_.searchFilters,
                        function (res) {
                            if (res.code === "0000" && res.data.rows.length < 10000) {
                                this_.tableList = res.data.rows;
                                this_.totalSize = Number(res.data.total);
                            } else {
                                this_.$message({
                                    message: "没有数据或者数据量超过1万笔,请添加筛选条件后重试",
                                    type: "error"
                                });
                            }
                        }
                    );

                    exportExcel(this_.tableList, this.tableHeaderList, fileName);
                    this_.findPage(null);
                })
                .catch(() => {});
        },
        // 显示新增界面
        handleAdd: function () {
            this.operation = true;
            this.dataForm.id = "";
            //this.dataForm={};
            if (this.$refs["dataForm"] != undefined) {
                this.$refs["dataForm"].resetFields();
            }
            this.dataForm.document_license = "";
            this.supplierDataForm.status = 1;
            this.utils.request.supplierInformationListPage(
                this.supplierDataForm,
                res => {
                    this.tableData = res.data.rows;
                    this.supplierDataForm.total = res.data.total;
                    this.dialogVisible = true;
                }
            );
        },
        handleSelectionChange(val) {
            this.multipleSelection = val;
        },
        // 新增合同
        addContract: function () {
            var selected = this.multipleSelection;
            if (selected.length > 1) {
                this.$message({
                    message: "单个合同只能选择单个供应商",
                    type: "warning"
                });
                return false;
            } else {
                let params = {};
                (params.supplierCode = selected[0].supplierMnemonicCode),
                (params.supplierName = selected[0].supplierName),
                (params.code = new Date().getTime());
                params.busiCode = "CGD" + new Date().getTime();
                params.busiType = 1;
                params.type = 1;
                params.tradeCurrency = "CNY";
                params.status = 0;
                params.startTime = new Date();
                params.endTime = new Date();
                params.deleteFlag = 0;

                this.conCode = params.code;
                this.utils.request.addPurchaseContractInfo(params, this.editInfoBack);
            }

        },
        // 打印
        print: function () {
            this.printPage = true;
            this.operation = true;
        },
        reset: function () {
            this.queryFiteris = {};
            this.findPage(null);
        },

        // 显示编辑界面
        handleEdit: function (params) {
            console.log(params);
            this.dialogVisible = true;
            this.operation = false;
            var this_ = this;
            this.$nextTick(function () {
                this_.dataForm = Object.assign({}, params);
            });
            // var search={};
            // search.id=params.row.id
            // search.t="chargeCard";

            // this.utils.request.queryUserInfo(search,function(res){

            //     if(res.code == "0000"){
            // 		}else{
            // 		this_.$message({message: '获取产品信息异常', type: 'error'});
            // 		}

            // })
        },
        // 编辑
        submitForm: function () {
            this.$refs.dataForm.validate(valid => {
                if (valid) {
                    this.$confirm("确认提交吗？", "提示", {}).then(() => {
                        // 	                    var this_ = this;
                        //                         this.editLoading = true
                        //                         let params = Object.assign({}, this.dataForm)
                        //                         params.t='chargeCard';
                        //                         this.utils.request.editUserInfo(params,this.editInfoBack)
                        this.$message({
                            message: "操作成功",
                            type: "success"
                        });
                        this.dialogVisible = false;
                    });
                }
            });
        },
        // 编辑
        updateContract: function () {
            this.$refs.dataForm.validate(valid => {
                if (valid) {
                    this.$confirm("确认提交吗？", "提示", {}).then(() => {
                        var this_ = this;
                        this_.editLoading = true;
                        let params = Object.assign({}, this.dataForm);
                        this_.utils.request.editPurchaseContractInfo(
                            params,
                            this.editInfoBack
                        );
                    });
                }
            });
        },
        // 新增修改回调
        editInfoBack: function (data) {
            if (data.code == "0000") {
                //TODO 跳转
                this.$router.push({
                    path: `/contractEdit`,
                    query: {
                        contractCode: this.conCode,
                        id: data.data,
                        busiType: 1
                    }
                });
                // this.$message({ message: "操作成功", type: "success" });
            } else {
                this.$message({
                    message: "操作失败",
                    type: "error"
                });
            }
            this.detailpage = false;
            this.findPage();
            this.dialogVisible = false;
            this.operation = false;
            this.editLoading = false;
        },
        //业务类型
        formatbusiType(row, column, cellValue, index) {
            if (cellValue == "1") {
                return "采购合同";
            } else if (cellValue == "3") {
                return "经销合同";
            } else if (cellValue == "2") {
                return "代销合同";
            }
        },
        formatTradeCurrency(row, column, cellValue, index) {
            if (cellValue == "CNY") {
                return "人名币";
            } else if (cellValue == "USD") {
                return "美元";
            }
        },
        formatType(row, column, cellValue, index) {
            if (cellValue == 1) {
                return "自采合同";
            } else if (cellValue == 3) {
                return "代销合同";
            } else if (cellValue == 2) {
                return "经销合同";
            }
        },
        formatStatus(row, column, cellValue, index) {
            if (cellValue == 0) {
                return "有效";
            } else if (cellValue == 1) {
                return "无效";
            }
        },
        // 时间格式化
        dateFormat: function (row, column, cellValue, index) {
            return format(row[column.property]);
        },

        // 处理表格列过滤显示
        displayFilterColumnsDialog: function () {
            this.$refs.tableColumnFilterDialog.setDialogVisible(true);
        },
        // 处理表格列过滤显示
        handleFilterColumns: function (data) {
            this.filterColumns = data.filterColumns;
            this.$refs.tableColumnFilterDialog.setDialogVisible(false);
        },
        // 处理表格列过滤显示
        initColumns: function () {
            let temp = [];
            this.columns = [
                // { prop: "number", label: "合同编码", minWidth: 120 },
                // { prop: "business", label: "商家名", minWidth: 120 },
                // { prop: "contractattributes", label: "合同属", minWidth: 120 },
                // { prop: "tradingcurrency", label: "交易币别", minWidth: 120 },
                // { prop: "invalid", label: "是否失效", minWidth: 120 },
                // { prop: "suppliernumber", label: "供应商编码", minWidth: 120 },
                // { prop: "suppliername", label: "供应商名称", minWidth: 120 },
                // { prop: "effectivetime", label: "合同生效时间", minWidth: 120 },
                // { prop: "timefailure", label: "合同失效时间", minWidth: 120 },
                // { prop: "type", label: "合同变更", minWidth: 120 },
                // { prop: "status", label: "履行状态", minWidth: 120 },
                // { prop: "numbered", label: "原合同编号", minWidth: 120 },
                // { prop: "creator", label: "制单人", minWidth: 120 }
                {
                    prop: "name",
                    label: "合同名称",
                    minWidth: 120
                },
                {
                    prop: "supplierCode",
                    label: "供应商编码",
                    minWidth: 120
                },
                {
                    prop: "supplierName",
                    label: "供应商名称",
                    minWidth: 120
                },
                {
                    prop: "busiType",
                    label: "业务类型",
                    minWidth: 120,
                    formatter: this.formatbusiType
                },
                {
                    prop: "busiCode",
                    label: "业务编码",
                    minWidth: 120
                },
                {
                    prop: "code",
                    label: "合同编码",
                    minWidth: 120
                },
                {
                    prop: "merchantCode",
                    label: "商家编码",
                    minWidth: 120
                },
                {
                    prop: "merchantName",
                    label: "商家名称",
                    minWidth: 120
                },
                {
                    prop: "type",
                    label: "合同属性",
                    minWidth: 120,
                    formatter: this.formatType
                },
                {
                    prop: "startTime",
                    label: "生效开始时间",
                    minWidth: 120
                },
                {
                    prop: "endTime",
                    label: "生效结束时间",
                    minWidth: 120
                },
                {
                    prop: "tradeCurrency",
                    label: "交易币别",
                    minWidth: 120,
                    formatter: this.formatTradeCurrency
                },
                {
                    prop: "status",
                    label: "状态",
                    minWidth: 120,
                    formatter: this.formatStatus
                },
                {
                    prop: "createTime",
                    label: "制单时间",
                    minWidth: 120
                },
                {
                    prop: "createrName",
                    label: "制单人",
                    minWidth: 120
                }
            ];
            $.each(this.columns, function (key, val) {
                temp.push(val);
            });
            this.filterColumns = temp;
        },

        //查询供应商
        findSupplierList() {
            this.utils.request.supplierInformationListPage(
                this.supplierDataForm,
                res => {
                    this.tableData = res.data.rows;
                    this.supplierDataForm.total = res.data.total;
                }
            );
        },
        //重置
        resetSupplier() {
            if (this.$refs["supplierDataForm"] != null) {
                this.supplierDataForm = {};
            }
            this.findSupplierList();
        }
    },
    mounted() {
        this.initColumns();
        this.findPage(null);
    }
};
</script>

<style lang="scss" scoped>
/deep/ .el-input__inner {
    width: 200px;
}

.el-form-item--mini.el-form-item,
.el-form-item--small.el-form-item {
    margin-bottom: 10px;
}

.t_r {
    margin: 5px 0px 20px;
}

.el-col {
    border-radius: 4px;
}

.bg-purple-dark {
    background: #99a9bf;
}

.bg-purple {
    background: #d3dce6;
    font-size: 18px;
}

.bg-purple-light {
    background: #e5e9f2;
}

.grid-content {
    border-radius: 4px;
    min-height: 36px;
}

.row-bg {
    padding: 10px 0;
    background-color: #f9fafc;
}
</style>
